<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>乐购商城注册页面</title>
    <!-- 重置 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./css/common.css">


    <!-- 引入当前样式 -->
    <link rel="stylesheet" href="./css/register.css">

    <!-- 引入jquery -->
    <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>

    <!-- 表单验证插件 -->
    <script src="./lib/jquery.validate.js"></script>

    <!-- 引入自己的css -->
    <script src="./js/register.js"></script>
 
</head>

<body>

        <header class="header">
                <div class="container-full bg-black font-white">
                    <div class="first-nav center cf">
                        <a href="#" class="fl font-white f-l-i220">legochina.cn</a>
                        <p class="fr">欢迎光临
                            <a href="#" class="theme-font-color">乐购</a>,请
                            <a href="#" class="font-white">登录</a>/
                            <a href="#" class="theme-font-color">注册</a>
                        </p>
                        <img class="logo" src="./images/logo.jpg" alt="">
                    </div>
                </div>
                <!-- 搜索框 -->
                <div class="center search-box cf" style="min-width: 700px;">
        
                    <div class="shopcart fr">
                        <a href="#" class="font-white">购物车
                            <span>3</span>
                        </a>
                        <a href="#">我的订单</a>
                    </div>
        
                    <div class="fr search-input-box">
                        <form action="">
                            <input type="text" class="theme-border-color" placeholder="创意文具">
                            <input type="submit" value="" style="margin-left:-7px; cursor: pointer;">
                        </form>
                        <!-- 购物车的订单 -->
                    </div>
                </div>
                <!-- 导航栏 -->
                <nav class="navigation center">
                    <ul class="cf">
                        <li>
                            <a href="#">图书</a>
                        </li>
                        <li>
                            <a href="#">电子书</a>
                        </li>
                        <li>
                            <a href="#">原创文学</a>
                        </li>
                        <li>
                            <a href="#">服装</a>
                        </li>
                        <li>
                            <a href="#">户外运动</a>
                        </li>
                        <li>
                            <a href="#">儿童装</a>
                        </li>
                        <li>
                            <a href="#">家具</a>
                        </li>
                        <li>
                            <a href="#">创意文具</a>
                        </li>
                        <li>
                            <a href="#">地方特产</a>
                        </li>
                        <li>
                            <a href="#">海外购</a>
                        </li>
                        <li>
                            <a href="#">电器城</a>
                        </li>
                    </ul>
                </nav>
            </header>

    <!-- form -->
    <section id="register" class="container  mt30">
        <form id="myform" action="#">
            <p class="rbox">
                <label>用户名</label>
                <input type="text" id="user" name="user" placeholder="您的账户名和登录名">
            </p>
            <p class="rbox">
                <label>设置密码</label>
                <input type="password" name="pwd" id="pwd" placeholder="建议设置两种字符密码">
            </p>
            <p class="rbox">
                <label>确认密码</label>
                <input type="password" name="confirmPwd" placeholder="再次输入密码">
            </p>
            <p class="rbox">
                <label>中国+86 </label>
                <input type="text" name="phone" placeholder="建议使用常用手机号">
            </p>
            <p class="rbox">
                <label>验证码</label>
                <input type="text" placeholder="请输入验证码">
                <img class="vcode" src="./images/vcode.jpg" alt="">
            </p>
            <p class="rbox">
                <label>手机验证码</label>
                <input type="text" placeholder="输入手机验证码">
                <a class="vBtn" href="#">获取验证码</a>
            </p>
            <p>
                <input id="isAgree" type="checkbox">我已阅读并同意<span class="cf60">《京东用户注册协议》</span>
            </p>
            <p>
                <input type="submit" value="立即注册">
            </p>
        </form>
    </section>

    <!-- footer -->
    <footer class="container mt30">
        <img src="./images/footer.png" alt="">
    </footer>


</body>
</html>